<template>
  <el-dialog
    :model-value="show"
    title="分配角色"
    width="500"
    @close="closeClear"
  >
    <el-form ref="formRef" :model="form" :rules="rules">
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input
          v-model="form.description"
          autocomplete="off"
          :rows="4"
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="是否启用">
        <el-radio-group v-model="form.status" class="ml-4">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeClear">取消</el-button>
        <el-button type="primary" @click="submitFn"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
import { reactive, ref, watch } from "vue";
import { addRoleApi, editRolecontentApi } from "./api";

// 接收父组件传过来的值
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  id: {
    type: Number,
    default: 0,
  },
  rocontent: {
    type: Object,
    default: {},
  },
});

const emit = defineEmits(["hide"]);

// 这是表单输入的数据
const form = reactive<IRoleParamsModel>({
  description: "",
  name: "",
  status: 0,
});

// 这是表单的校验
const rules = {
  name: [{ required: true, trigger: "blur", message: "请填写角色名称" }],
  description: [{ required: true, trigger: "blur", message: "请填写描述" }],
};
// 为了拿到组件中的方法
const formRef = ref<FormInstance>();

// 这是添加角色的方法
const addrolecontent = () => {
  ElMessageBox.confirm("此操作将添加角色信息, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    // 发请求
    addRoleApi(form)
      .then((res) => {
        if (res.code === 200) {
          // 提示
          ElMessage.success("添加成功");
          // 清空表单
          form.description = "";
          form.name = "";
          form.status = 0;
          // 把dialog关闭 刷新页面
          emit("hide", true);
        }
      })
      .catch(() => {
        ElMessage.error("添加失败");
      });
  });
};

// 编辑的方法
const editrolecontent = () => {
  ElMessageBox.confirm("此操作将修改角色信息, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      editRolecontentApi(form, props.id).then((res) => {
        if (res.code === 200) {
          // 提示，清空表单，隐藏
          ElMessage.success("修改成功");
          // 清空表单
          form.description = "";
          form.name = "";
          form.status = 0;
          emit("hide", true);
        }
      });
    })
    .catch(() => {});
};

// 点击确认按钮再进行一次数据的校验;
const submitFn = () => {
  // 还要再做一次数据的校验
  formRef.value?.validate((ok: boolean) => {
    if (ok) {
      if (props.id === 0) {
        // 添加用户
        addrolecontent();
      } else {
        // 编辑用户
        editrolecontent();
      }
    } else {
      // 提示
    }
  });
};
// 点击取消
const closeClear = () => {
  emit("hide");
  form.description = "";
  form.name = "";
  form.status = 0;
};
watch(
  () => props.id,
  () => {
    if (props.id !== 0) {
      Object.assign(form, props.rocontent);
    } else {
      form.description = "";
      form.name = "";
      form.status = 0;
      // formRef.value?.resetFields();
    }
  }
);
</script>
<style lang="less" scoped></style>
